<template>
	<view class="person-postion-relative">
		<view class="person-info person-padding-bottom">
			<view class="person-info-photo">
				<image src="http://erp.bpstech.cn/stuff/image/429042"></image>
				<text>{{ userName }}</text>
			</view>
			<view class="person-info-scan" @click="scanCode">
				<text class="def-icon">&#xe604;</text>
				<text>扫一扫</text>
			</view>
		</view>
		<view class="def-grid home-top home-positon">
			<view class="def-grip-item" hover-class="def-grip-item-hover" @click="toTasks(0)">
				<view class="home-top-item home-top-sty">
					<text class="def-icon">&#xe626;</text>
					<text class="home-top-item-text text-position">{{ tasks.progress_num }}</text>
				</view>
				<text class="uni-grid-9-text  private-text">待办任务</text>
			</view>
			<view class="def-grip-item" hover-class="def-grip-item-hover no-border-right" @click="toTasks(1)">
				<view class="home-top-item home-top-sty">
					<text class="def-icon">&#xe627;</text>
					<text class="home-top-item-text text-position">{{ tasks.begin_num }}</text>
				</view>
				<text class="uni-grid-9-text private-text">即将开始</text>
			</view>
			<view class="def-grip-item" hover-class="def-grip-item-hover" @click="toTasks(2)">
				<view class="home-top-item home-top-sty">
					<text class="def-icon">&#xe665;</text>
					<text class="home-top-item-text text-position">{{ tasks.complete_num }}</text>
				</view>
				<text class="uni-grid-9-text private-text">已完成</text>
			</view>
		</view>
		<view class="content content-project-top">
			<view class="project-manage">
				<text class="project-title">项目管理</text>
				<view class="def-grid def-padding">
					<view class="def-grip-item" @click="myProject">
						<view class="def-grip-rudio icon-colour-fabf"><text class="def-icon def-icon-project">&#xe610;</text></view>
						<text class="uni-grid-9-text private-text">我的项目</text>
					</view>
					<navigator url="../../pagesChild/myProject/projectDetail/constructionLog" v-if="is_manager">
						<view class="def-grip-item" hover-class="def-grip-item-hover">
							<view class="def-grip-rudio icon-colour-green"><text class="def-icon def-icon-rule">&#xe68d;</text></view>
							<text class="uni-grid-9-text private-text">施工日志</text>
						</view>
					</navigator>
					<navigator url="../../pagesChild/myProject/projectDetail/personalManager">
						<view class="def-grip-item" hover-class="def-grip-item-hover no-border-right">
							<view class="def-grip-rudio icon-colour-blue"><text class="def-icon def-icon-tel">&#xe617;</text></view>
							<text class="uni-grid-9-text private-text">通讯录</text>
						</view>
					</navigator>
					<navigator url="../../pagesChild/mainChildPage/intelligenceReports">
						<view class="def-grip-item" hover-class="def-grip-item-hover">
							<view class="def-grip-rudio icon-colour-green"><text class="def-icon def-icon-statement">&#xe60b;</text></view>
							<text class="uni-grid-9-text private-text">智能报表</text>
						</view>
					</navigator>
					<navigator url="../../pagesChild/mainChildPage/projectMap">
						<view class="def-grip-item" hover-class="def-grip-item-hover no-border-right">
							<view class="def-grip-rudio icon-colour-violet"><text class="def-icon def-icon-maps">&#xe868;</text></view>
							<text class="uni-grid-9-text private-text">项目地图</text>
						</view>
					</navigator>
					<navigator url="../../pagesChild/commercial/commercialOpportunityList">
						<view class="def-grip-item" hover-class="def-grip-item-hover no-border-right">
							<view class="def-grip-rudio icon-colour-red"><text class="def-icon def-icon-buisness">&#xe719;</text></view>
							<text class="uni-grid-9-text private-text">商机管理</text>
						</view>
					</navigator>
				</view>
			</view>
			<view style="height: 20upx;"></view>
			<view class="project-manage">
				<text class="project-title">平台管理</text>
				<view class="def-grid def-padding">
					<!-- <navigator url="../mainChildPage/tempPage?title=后台管理">
						<view class="def-grip-item" hover-class="def-grip-item-hover">
							<text class="def-icon def-icon-backstage">&#xe64a;</text>
							<text class="uni-grid-9-text">后台管理</text>
						</view>
					</navigator> -->
					<navigator url="../../pagesChild/mainChildPage/shoppingCenter">
						<view class="def-grip-item" hover-class="def-grip-item-hover no-border-right">
							<view class="def-grip-rudio  icon-colour-blue"><text class="def-icon def-icon-shopping">&#xe67b;</text></view>
							<text class="uni-grid-9-text private-text">商场中心</text>
						</view>
					</navigator>
					<!-- <navigator url="../mainChildPage/constructionStandard?type=construction">
						<view class="def-grip-item" hover-class="def-grip-item-hover">
							<text class="def-icon def-icon-rule">&#xe640;</text>
							<text class="uni-grid-9-text">施工规范</text>
						</view>
					</navigator> -->
					<!-- <navigator url="../mainChildPage/tempPage?title=文档管理">
						<view class="def-grip-item" hover-class="def-grip-item-hover">
							<text class="def-icon def-icon-docs">&#xe648;</text>
							<text class="uni-grid-9-text">文档管理</text>
						</view>
					</navigator> -->
					<navigator url="../../pagesChild/mainChildPage/constructionStandard?type=handbook">
						<view class="def-grip-item" hover-class="def-grip-item-hover no-border-right">
							<view class="def-grip-rudio icon-colour-fabf"><text class="def-icon def-icon-desc">&#xe898;</text></view>
							<text class="uni-grid-9-text private-text">应用手册</text>
						</view>
					</navigator>
				</view>
			</view>
		</view>
		<!-- 弹窗 -->
		<uni-popup :show="showstate" type="middle" :popupWidth="550" @hidePopup="hidePop">
			<view>
				<view class="text-center"></view>
				<textarea disabled class="text-content" :value="listEdition.version_log"></textarea>
				<button @click="linkat(listEdition.id)">查看更多</button>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import { mapState } from 'vuex';

export default {
	computed: mapState(['forcedLogin', 'hasLogin', 'userName', 'is_manager']),
	data() {
		return {
			tasks: {},
			listEdition: '',
			showstate: false
		};
	},

	onLoad() {
		this.automaticLogin();
		// #ifdef APP-PLUS
		if (plus.os.name === 'iOS') return;
		let main = plus.android.runtimeMainActivity();
		//为了防止快速点按返回键导致程序退出重写quit方法改为隐藏至后台
		plus.runtime.quit = function() {
			main.moveTaskToBack(false);
		};
		//重写toast方法如果内容为 ‘再按一次退出应用’ 就隐藏应用，其他正常toast
		plus.nativeUI.toast = function(str) {
			if (str == '再按一次退出应用') {
				main.moveTaskToBack(false);
				return false;
			} else {
				uni.showToast({
					title: str,
					icon: 'none'
				});
			}
		};
		// #endif
	},

	onShow() {
		// 页面显示时调用
		this.hasLoginOption();
	},
	onPullDownRefresh() {
		this.$request({
			url: this.$store.state.baseUrl + '/lwj/get_todo_info',
			method: 'post',
			header: {
				token: this.$store.state.token
			},
			data: {},
			success: res => {
				this.tasks = res.data.data;
				if (res.data.data.message_num > 0) {
					uni.setTabBarBadge({
						index: 1,
						text: res.data.data.message_num + ''
					});
				} else {
					uni.removeTabBarBadge({
						index: 1
					});
				}
			},
			fail: () => {},
			complete: () => {
				uni.stopPullDownRefresh();
			}
		});
	},
	watch: {
		hasLogin() {
			this.hasLoginOption();
		}
	},
	methods: {
		hidePop() {
			this.showstate = false;
		},

		scanCode() {
			// 扫码
			uni.scanCode({
				success: res => {
					console.log('条码类型：' + res.scanType);
					console.log('条码内容：' + res.result);
				}
			});
		},
		automaticLogin() {
			// 有记住密码的，自动登录
			const loginData = uni.getStorageSync('loginData');
			if (!loginData || this.hasLogin) return;
			this.$request({
				url: this.$store.state.baseUrl + '/lwj/login',
				method: 'POST',
				data: loginData,
				success: res => {
					if (res.data.code === 1) {
						this.$store.commit('setLoginState', {
							hasLogin: true,
							token: res.data.data.token,
							uid: res.data.data.uid,
							is_manager: res.data.data.is_manager,
							userName: res.data.data.name
						});
						if (res.data.data.version_check == false) {
							// #ifdef MP-WEIXIN
							this.getEdition();
							this.showstate = true;
							// #endif
						}
					} else {
						uni.showToast({
							icon: 'none',
							title: res.data.msg,
							duration: 3000
						});
						uni.reLaunch({
							url: '../login/login'
						});
					}
				},
				fail: () => {
					uni.showToast({
						icon: 'none',
						title: '用户账号或密码不正确'
					});
				},
				complete: () => {}
			});
		},
		getEdition() {
			// 版本内容

			this.$request({
				url: this.$store.state.baseUrl + '/lwj/get_version_info',
				method: 'POST',
				data: {},
				success: res => {
					if (res.data.code == 1) {
						this.listEdition = res.data.data.info;
					}
				},
				fail: () => {},
				complete: () => {}
			});
		},
		linkat(id) {
			uni.navigateTo({
				url: './newVersionRemind?id=' + id
			});
		},
		toTasks(index) {
			uni.navigateTo({
				url: '../../pagesChild/myTasks/myTasks?index=' + index,
				success: res => {},
				fail: () => {},
				complete: () => {}
			});
		},
		myProject() {
			uni.navigateTo({
				url: '../../pagesChild/myProject/myProject',
				success: res => {},
				fail: () => {},
				complete: () => {}
			});
		},
		hasLoginOption() {
			const loginData = uni.getStorageSync('loginData');
			if (this.hasLogin) {
				this.getMainInfo();
			} else if (!loginData) {
				uni.showModal({
					title: '未登录',
					content: '您未登录，需要登录后，才能享有更多功能',
					/**
					 * 如果需要强制登录，不显示取消按钮
					 */
					showCancel: !this.forcedLogin,
					success: res => {
						if (res.confirm) {
							/**
							 * 如果需要强制登录，使用reLaunch方式
							 */
							/* if (this.forcedLogin) {
									uni.reLaunch({
										url: '../login/login'
									});
								} else {
									uni.navigateTo({
										url: '../login/login'
									});
								} */
							// 删除所有页面跳到登录
							uni.reLaunch({
								url: '../login/login'
							});
						}
					}
				});
			}
		},
		getMainInfo() {
			this.$request({
				url: this.$store.state.baseUrl + '/lwj/get_todo_info',
				method: 'post',
				header: {
					token: this.$store.state.token
				},
				data: {},
				success: res => {
					this.tasks = res.data.data;
					if (res.data.data.message_num > 0) {
						uni.setTabBarBadge({
							index: 1,
							text: res.data.data.message_num + ''
						});
					} else {
						uni.removeTabBarBadge({
							index: 1
						});
					}
				},
				fail: () => {},
				complete: () => {}
			});
		}
	}
};
</script>

<style scoped>
.text-center {
	height: 200upx;
	text-align: center;
	background: url(../../static/img/addfunction.png) center center no-repeat;
	background-size: cover;
}
.text-content {
	padding: 20upx 0;
	color: #66666;
}
.uni-popup-middle {
	padding: 0;
}
.person-info {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: #008ff3;
	padding: 10upx 40upx;
}
.person-info-photo {
	height: 100upx;
	line-height: 100upx;
	display: flex;
}
.person-info-photo image {
	width: 100upx;
	height: 100upx;
	border-radius: 50%;
}
.person-info-photo text {
	font-size: 30upx;
	margin-left: 30upx;
	color: white;
}
.person-info-scan {
	padding: 0 20upx;
	background-color: #ffffff;
	border-radius: 30upx;
}

.person-info-scan text {
	font-size: 30upx;
	color: #007aff;
}
.person-info-scan text:nth-child(1) {
	padding-right: 20upx;
}
.def-icon-material {
	color: #5e59b5;
}

.home-top .def-grip-item .home-top-item .def-icon {
	color: #007aff;
}

.home-top .def-grip-item {
	color: #7a7e83;
}

.def-icon-project,
.def-icon-rule {
	color: #ffffff;
}

.def-icon-buisness,
.def-icon-backstage,
.def-icon-maps {
	color: #ffffff;
}

.def-icon-human,
.def-icon-desc {
	color: #ffffff;
}

.def-icon-statement,
.def-icon-docs {
	color: #ffffff;
}

.def-icon-tel,
.def-icon-shopping {
	color: #ffffff;
}

.project-title {
	padding-left: 75upx;
	display: block;
	border-bottom: 1px dashed #efeff4;
	height: 80upx;
	line-height: 80upx;
	font-weight: bold;
}

.project-manage {
	border-radius: 16upx;
	background-color: white;
}

.home-top {
	background-color: #ffffff;
}

.home-top .def-grip-item .def-icon {
	font-size: 70upx;
}

.def-grid {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}
.def-grip-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 240upx;
}
/* 2019.10.09 lg新增样式 */

.home-top-sty {
	position: relative;
	width: 120upx;
	height: 120upx;
	border-radius: 100%;
	background-color: #eef3f6;
	text-align: center;
}
.person-padding-bottom {
	padding-bottom: 60upx;
}
.person-postion-relative {
	position: relative;
}
.home-positon {
	position: absolute;
	width: 96%;
	height: 200upx;
	left: 2%;
	top: 130upx;
	padding: 40upx 0 20upx;
	border-radius: 30upx;
}
.content-project-top {
	margin-top: 230upx;
}
.private-text {
	line-height: 80upx;
}
.content-project-top .def-icon {
	font-size: 55upx;
}
.def-grip-rudio {
	width: 100upx;
	height: 100upx;
	text-align: center;
	line-height: 100upx;
	border-radius: 100%;
}
.content-project-top navigator {
	height: 180upx;
}
.def-padding {
	padding: 30upx 0;
}
.icon-colour-fabf {
	background-color: #fbaf22;
}
.icon-colour-blue {
	background-color: #5da0fb;
}
.icon-colour-green {
	background-color: #80c269;
}
.icon-colour-violet {
	background-color: #6d56ff;
}
.icon-colour-red {
	background-color: #ff616e;
}
.text-position {
	position: absolute;
	right: -25upx;
	top: -20upx;
	text-align: center;
	padding: 0upx 18upx;
	background-color: #fbaf22;
	border: 2upx solid #fff;
	border-radius: 100upx;
	color: #fff;
}
</style>
